<template>
	<view class="sign-in">
		<uni-nav-bar dark :fixed="true" :border="false" background-color="#FFFFFF" status-bar title="补卡"
			left-icon="left" @clickLeft="toBack" color="#000" />
		<view class="ask-for-leave-body">
			<u-cell-group>
				<u-cell title="补卡日期(必填)" @click="openCalendar" isLink :value="dateText">
				</u-cell>
				<u-popup mode="bottom" :round="10" :show="calendarShow" @close="calendarShow = false">
					<uni-calendar @monthSwitch="monthSwitch" @change="change" :selected="selected" />
				</u-popup>
				<u-cell title="补卡班次(必填)" @click="lotShow = true" isLink :value="lotText" :disabled="isAttendance">
				</u-cell>
				<u-picker :show="lotShow" :columns="lotColumns" keyName="label" @confirm="lotConfirm"
					@cancel="lotShow = false" @close="lotShow = false" :closeOnClickOverlay="true">
				</u-picker>
			</u-cell-group>
			<u-cell-group>
				<u-cell title="补卡事由(必填)"></u-cell>
				<u--textarea v-model="attendanceApply.applyExplain" placeholder="请输入内容">
				</u--textarea>
			</u-cell-group>
			<u-cell-group>
				<u-cell title="说明附件" value="+" @click="uploadImg"></u-cell>
				<view v-for="(item,index) in imgList" :key="index" style="padding: 15rpx 30rpx;">
					<view style="display: flex;background-color: #eeeeef;
						border-radius: 8rpx;">
						<view style="width: 100rpx; height: 100rpx;" @click="previewImg()">
							<image style="width: 100%; height: 100%;border-radius: 8rpx;" mode="aspectFill" :src="READ_IMG_URL+item">
							</image>
						</view>
						<view style="flex: 1;margin-left: 15rpx;line-height: 100rpx;
							display: flex;justify-content: space-between;
							padding-right: 15rpx;">
							<text></text>
							<u-icon name="close" size="15" @click="deleteImg(index)">
							</u-icon>
						</view>
					</view>
				</view>
			</u-cell-group>
			<view style="width: 100%;">
				<view style="width: 90%;margin: auto;margin-top: 40rpx;">
					<u-button shape="circle" type="primary" @click="submit">
						提交
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import attendanceApi from '../../request/attendanceApi';
	import config from '../../request/config';
	export default {
		data() {
			return {
				READ_IMG_URL: config.READ_IMG_URL,
				userInfo: {},
				attendanceApply: {
					attendanceId: null, // 考勤id
					attendanceLot: null, // 考勤批次
					applyExplain: null, // 请假事由
					accessoryUrl: null, // 说明附件
					applyType: 1 // 申请类型为补卡
				},
				calendarShow: false,
				dayValue: '',
				monthValue: '',
				yearValue: '',
				selected: [],
				selectAttendance: {},
				isAttendance: true,
				imgList: [],
				dateText: "未选择",
				lotText: "未选择",
				lotShow: false,
				lotColumns: [
					[]
				]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("loginUser");
			this.yearValue = new Date().getFullYear()
			this.monthValue = new Date().getMonth() + 1;
			this.dayValue = new Date().getDate();
		},
		methods: {
			// 返回上个页面
			toBack() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1表示返回上一页
					animationType: 'pop-out', // 页面关闭的动画效果
					animationDuration: 300, // 页面关闭的动画时间
				});
			},
			//小于10的拼接上0字符串
			addZero(s) {
				return s < 10 ? ('0' + s) : s;
			},
			// 打开选取日期弹窗
			openCalendar() {
				const value = this.yearValue + "-" + this.addZero(this.monthValue)
				this.getSelected(value);
				this.calendarShow = true;
			},
			// 获取指定日期的出勤记录
			change(e) {
				console.log("e===>", e)
				this.dateText = e.fulldate;
				this.attendanceApply.attendanceId = null;
				this.attendanceApply.attendanceLot = null;
				this.lotText = "未选择"
				uni.showLoading({
					title: '加载中...',
					mask: true,
				});
				const data = {
					clockingDate: e.fulldate
				}
				attendanceApi.getUserAttendance(data).then(res => {
					if (res.code === 200) {
						this.selectAttendance = res.data.attendanceVo;
						if (this.selectAttendance.id === null) {
							this.isAttendance = true;
						} else {
							this.isAttendance = false;
							this.attendanceApply.attendanceId = this.selectAttendance.id;
							this.getLotColumns(this.selectAttendance);
						}
						this.calendarShow = false;
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			// 获取打卡规则
			// 获取班次
			getLotColumns(attendance) {
				this.lotColumns[0] = []
				// 上午状态
				if (attendance.forenoonStatus !== null) {
					let checkin = {
						label: attendance.forenoonCheckin,
						value: 0
					}
					let checkout = {
						label: attendance.forenoonCheckout,
						value: 1
					}
					// 上午上班
					if(attendance.forenoonCheckinStatus === 1){
						// 正常
						checkin.label = "正常-"+attendance.forenoonCheckin
					}else if(attendance.forenoonCheckinStatus === 2){
						// 迟到
						checkin.label = "迟到-"+attendance.forenoonCheckin
					}else if(attendance.forenoonCheckinStatus === 3){
						// 旷工
						checkin.label = "旷工-"+attendance.forenoonCheckin
					}else if(attendance.forenoonCheckinStatus === 4){
						// 请假
						checkin.label = "请假"+attendance.forenoonCheckin
					}
					// 上午下班
					if(attendance.forenoonCheckoutStatus === 1){
						// 正常
						checkout.label = "正常-"+attendance.forenoonCheckout
					}else if(attendance.forenoonCheckoutStatus === 2){
						// 早退
						checkout.label = "早退-"+attendance.forenoonCheckout
					}else if(attendance.forenoonCheckoutStatus === 3){
						// 旷工
						checkout.label = "旷工-"+attendance.forenoonCheckout
					}else if(attendance.forenoonCheckoutStatus === 4){
						// 请假
						checkout.label = "请假-"+attendance.forenoonCheckout
					}else if(attendance.forenoonCheckoutStatus === 5){
						// 未签退
						checkout.label = "未签退-"+attendance.forenoonCheckout
					}
					this.lotColumns[0].push(checkin);
					this.lotColumns[0].push(checkout);
				}
				// 下午状态
				if (attendance.afternoonStatus !== null) {
					let checkin = {
						label: attendance.afternoonCheckin,
						value: 2
					}
					let checkout = {
						label: attendance.afternoonCheckout,
						value: 3
					}
					// 下午上班
					if(attendance.afternoonCheckinStatus === 1){
						// 正常
						checkin.label = "正常-"+attendance.afternoonCheckin
					}else if(attendance.afternoonCheckinStatus === 2){
						// 迟到
						checkin.label = "迟到-"+attendance.afternoonCheckin
					}else if(attendance.afternoonCheckinStatus === 3){
						// 旷工
						checkin.label = "旷工-"+attendance.afternoonCheckin
					}else if(attendance.afternoonCheckinStatus === 4){
						// 请假
						checkin.label = "请假"+attendance.afternoonCheckin
					}
					// 下午下班
					if(attendance.afternoonCheckoutStatus === 1){
						// 正常
						checkout.label = "正常-"+attendance.afternoonCheckout
					}else if(attendance.afternoonCheckoutStatus === 2){
						// 早退
						checkout.label = "早退-"+attendance.afternoonCheckout
					}else if(attendance.afternoonCheckoutStatus === 3){
						// 旷工
						checkout.label = "旷工-"+attendance.afternoonCheckout
					}else if(attendance.afternoonCheckoutStatus === 4){
						// 请假
						checkout.label = "请假-"+attendance.afternoonCheckout
					}else if(attendance.afternoonCheckoutStatus === 5){
						// 未签退
						checkout.label = "未签退-"+attendance.afternoonCheckout
					}
					this.lotColumns[0].push(checkin);
					this.lotColumns[0].push(checkout);
				}
			},
			lotConfirm(e) {
				console.log("补卡班次===>", e)
				if (e.value[0]){
					this.attendanceApply.attendanceLot = e.value[0].value
					this.lotText = e.value[0].label
				}
				this.lotShow = false
			},
			// 切换月份
			monthSwitch(e) {
				// console.log("e===>", e)
				this.monthValue = e.month
				let value;
				if (typeof this.monthValue === 'number') {
					value = e.year + "-" + this.addZero(e.month);
				} else {
					value = e.year + "-" + e.month;
				}
				this.getSelected(value);
			},
			// 获取用户出勤列表
			getSelected(value) {
				this.selected = []
				const data = {
					employeeId: this.userInfo.id,
					yearMonth: value,
					currentPage: 1,
					pageSize: 1000,
				}
				attendanceApi.getUserAttendanceList(data).then(res => {
					if (res.code === 200) {
						res.data.attendanceList.forEach(item => {
							let info = ""
							if (item.forenoonStatus !== null ||
								item.afternoonStatus !== null) {
								if (item.forenoonStatus === 0 &&
									item.afternoonStatus === 0) {
									info = "正常"
								} else if (item.forenoonStatus === 4 ||
									item.afternoonStatus === 4) {
									info = "请假"
								} else {
									info = "异常"
								}
							}
							const data = {
								date: item.clockingDate,
								info: info
							}
							this.selected.push(data)
						})
					}
				})
			},
			// 上传图片
			uploadImg() {
				let _this = this;
				uni.chooseImage({
					count: 6, //默认9张
					success: function(res) {
						uni.showLoading({
							title: "上传中...",
							mask: true
						})
						const OaAuth = uni.getStorageSync("OaAuth") || '';
						let header = {
							"Content-Type": "application/json",
							"OaAuth": OaAuth,
						}
						res.tempFilePaths.forEach(item =>{
							let imgUrl = config.IMG_URL
							uni.uploadFile({
								url: imgUrl,
								fileType: 'image',
								filePath: item,
								name: 'file',
								header: header,
								success: (uploadFileRes) => {
									let fileRes = JSON.parse(uploadFileRes.data)
									if (fileRes.code === 200){
										_this.imgList.push(fileRes.data);
									}
								}
							});
						})
						uni.hideLoading();
					}
				});
			},
			// 预览图片
			previewImg() {
				let newList = []
				this.imgList.forEach(item =>{
					newList.push(this.READ_IMG_URL+item)
				})
				uni.previewImage({
					urls: newList,
					showmenu: false
				});
			},
			// 删除图片
			deleteImg(index) {
				this.imgList.splice(index, 1);
			},
			// 提交
			submit() {
				if (this.selectAttendance)
					if (this.attendanceApply.attendanceId === null ||
						this.attendanceApply.attendanceId === "") {
						this.$tip.tip("请选择补卡日期！")
						return;
					}
				if (this.attendanceApply.attendanceLot === null ||
					this.attendanceApply.attendanceLot === "") {
					this.$tip.tip("请选择补卡班次！")
					return;
				}
				if (this.attendanceApply.applyExplain === null ||
					this.attendanceApply.applyExplain === "") {
					this.$tip.tip("请输入补卡事由！")
					return;
				}
				if (this.imgList.length > 0){
					this.attendanceApply.accessoryUrl = this.imgList.join(";")
				}
				console.log("attendanceApply===>", this.attendanceApply);
				uni.showLoading({
					title: "提交中...",
					mask: true
				})
				attendanceApi.addAttendanceApply(this.attendanceApply).then(res => {
					if (res.code === 200) {
						this.attendanceApply = {
							attendanceId: null, // 考勤id
							attendanceLot: null, // 考勤批次
							applyExplain: null, // 请假事由
							accessoryUrl: null, // 说明附件
							applyType: 1 // 申请类型为补卡
						}
						this.dateText = '未选择'
						this.lotText = '未选择'
						uni.showToast({
							title: '提交成功',
							duration: 3000,
							icon: 'success'
						});
						uni.hideLoading();
						setTimeout(() => {
							uni.navigateBack({
								delta: 1, // 返回的页面数，1表示返回上一页
								animationType: 'pop-out', // 页面关闭的动画效果
								animationDuration: 300, // 页面关闭的动画时间
							});
						}, 1500);
					}
				}).finally(() => {
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style>
	.sign-in {
		min-height: 100vh;
		background-color: #eeeeef;
	}

	.u-cell-group {
		background-color: #ffffff;
		margin: 15rpx 0 15rpx 0;
	}
</style>